<template>
    <section>
        <div class="store-container">
            <div class="header flex-box">
                <h4>概况</h4>
            </div>
            <div v-loading="loading">
                <div class="store-con flex-box">
                    <div class="store-con__img">
                        <img :src="list.image ? list.image :'http://infyom.com/images/logo/blue_logo_150x150.jpg' "
                             class="img-circle"
                             alt="头像"/>
                    </div>
                    <div class="store-con__info">
                        <p>{{list.name ? list.name : '暂无数据'}}</p>
                        <span>创建时间：{{list.created_at ? list.created_at.slice(0,10) : '暂无数据'}}</span>
                    </div>
                    <div class="store-con__btn">
                        <el-button type="primary" @click="codeImg">获取链接</el-button>
                    </div>
                </div>
                <div class="store-con flex-box flex-box-display">
                    <div class="store-box" v-for="list in listBox">
                        <div class="store-box__title">{{list.value ? list.value : '暂无数据'}}</div>
                        <div class="store-box__info">{{list.title}}</div>
                    </div>
                </div>
                <div class="flex-box">
                    <div class="store-con" style="margin:0 10px 0 10px;">
                        <draw-order :message="list.order_data"></draw-order>
                    </div>
                    <div class="store-con" style="margin:0 10px 0 0;">
                        <draw-trad :message="list.trad_data"></draw-trad>
                    </div>
                </div>
                <div class="store-con">
                    <h4>常用功能</h4>
                    <div class="flex-box flex-box-display">
                        <a v-for="link in linkList" :href="'/admin/'+link.address" class="store-jump-box"
                           :style="'background:'+ link.color">
                            {{link.title}}
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <el-dialog
                title="访问小程序店铺"
                :visible.sync="dialogVisible"
                width="30%"
                center>
            <div class="dialog-con__img text-center">
                <img :src="list.img ? list.img : 'http://infyom.com/images/logo/blue_logo_150x150.jpg' "/>
            </div>
            <span slot="footer" class="dialog-footer">
                微信扫一扫查看
            </span>
        </el-dialog>
    </section>
</template>

<script>
    import DrawOrder from './DrawOrder'
    import DrawTrad from './DrawTrad'

    export default {
        components: {
            DrawOrder,
            DrawTrad
        },
        data() {
            return {
                loading: true,
                list: [],

                listBox: [{
                    title: '待发货订单', value: ''
                }, {
                    title: '维权订单', value: ''
                }, {
                    title: '昨日订单', value: ''
                }, {
                    title: '昨日交易额', value: ''
                }, {
                    title: '可提现余额', value: ''
                }],

                linkList: [{
                    title: '发布商品', address: 'goods#/add', color: '#F77A95'
                }, {
                    title: '管理商品', address: 'goods', color: '#C77AF7'
                }, {
                    title: '店铺装修', address: 'layouts/setting', color: '#7A81F7'
                }, {
                    title: '优惠券', address: 'bonuses/statistics', color: '#87D495'
                }],
                dialogVisible: false,
            }
        },
        computed: {},
        created() {

        },
        mounted() {
            this.getConfigsData();
        },
        methods: {
            getConfigsData() {
                axios
                    .get('admin_configs')
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('店铺配置', res);
                        this.list = res;
                        console.log('给子组件的值', this.list)
                        this.loading = false;
                    })
            },
            codeImg() {
                this.dialogVisible = true
            }
        }
    }

</script>

<style scoped>
    a {
        color: #FFFFFF;
    }

    .store-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-around;
    }

    .header {
        padding: 10px;
        background: #fff;
    }

    .store-con {
        width: 100%;
        height: auto;
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .store-con__img {
        width: 96px;
        height: auto;
        padding-right: 20px;
    }

    .store-con__img img {
        width: 56px;
        height: 56px;
    }

    .store-con__info {
        padding-right: 20px;
    }

    .store-con__info p {
        font-weight: bolder;
    }

    .store-con__info span {
        font-size: 12px;
        color: #999;
    }

    .store-box {
        text-align: center;
    }

    .store-box__title {
        color: #3F7DFF;
        font-size: 26px;
    }

    .store-box__info {
        font-size: 12px;
    }

    .store-jump-box {
        width: 100%;
        height: 90px;

        display: inline-block;

        text-align: center;
        color: #FFFFFF;
        line-height: 90px;
        font-size: 18px;

        margin: 20px;
    }

    .dialog-con__img img, .dialog-con__img div {
        width: 160px;
        height: 160px;
        line-height: 160px;

        margin: 20px auto;
    }
</style>
<style>
    .el-dialog__header {
        padding: 11px 20px 11px 20px;
        background: #3F7DFF;
    }

    .el-dialog__title {
        color: #FFFFFF;
    }

    .el-dialog__headerbtn .el-dialog__close {
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #FFFFFF;
        color: #3F7DFF;
        font-weight: bolder;
    }

    .el-dialog__headerbtn {
        top: 10px;
    }

    .el-col-5 {
        width: 19.88889%;
    }
</style>